import React from 'react';

function Child(props, ref) {
  const inputRef = React.useRef();
  // useImperativeHandle可以自定义向外暴漏对象
  React.useImperativeHandle(ref, () => (
    {
      focus() {
        inputRef.current.focus();
      },
      value: inputRef.current.value
    }
  ));
  return (
    <input type="text" ref={inputRef} />
  )
}

function Child2(props, ref) {
  return (
    <input type="text" ref={ref} />
  )
}
const ForwardChild = React.forwardRef(Child);
const ForwardChild2 = React.forwardRef(Child2);
export default function Parent() {
  let [number, setNumber] = React.useState(0);
  const inputRef = React.useRef();
  const inputRef2 = React.useRef();
  function getFocus() {
    console.log(inputRef.current);
    // 使用useImperativeHandle后只能获取焦点，但不能更改input的值
    inputRef.current.value = 'focus';
    inputRef.current.focus();

    // 子组件没有使用useImperativeHandle规定父组件的情况下
    // 父组件可以任意更改，删除input
    inputRef2.current.value = 'focusccccc';
    inputRef2.current.remove()
  }
  return (
    <div>
      <ForwardChild ref={inputRef} />
      <ForwardChild2 ref={inputRef2} />
      <button onClick={getFocus}>获得焦点</button>
      <p>{number}</p>
      <button onClick={() => {
        setNumber(number + 1)
      }}>+</button>
    </div>
  )
}